<template>
  <div id="wrapper">
    <nav class="top">
      <a @click="back()">

        <img class="left" src="../../assets/img/img.../xingzhuang164.png" alt="">
      </a>
      <span class="wenzi">客服中心</span>
      <!--@click="comment"-->
      <a  class="bian" @click="comment" v-show="isOpen">
        人工服务
      </a>

      <a class="comment" @click="service" v-show="isShow"> <img src="../../assets/img/kefufankui/rengong/star.png" height="38" width="40"/>
      <p>评价</p>
      </a>
    </nav>
    <!--content-->
    <div class="content">
    <div class="img">
    <img src="../../assets/img/kefufankui/rengong/形状 14.png" height="50" width="62"/>
      <!--<img src="../../assets/img/kefufankui/rengong/圆角矩形 4.png" height="200" width="577"/>-->
      </div>
    </div>
    <!--弹窗部分-->
    <div class="window" v-show="isOpenone">
      <span>请对我们的服务做出评价</span>
      <span>X</span>

      <div class="left">
      <ul>
        <li class="li"><img src="../../assets/img/kefufankui/pingjia/xiaolian.png"/></li>
        <li>满意</li>
      </ul>
      <ul>
        <li class="li"> <img src="../../assets/img/kefufankui/pingjia/xiaolian.png" /></li>
        <li>不满意</li>
      </ul>
      </div>
      <div class="submit">
        <input type="text" placeholder="备选 ( 必填 )">
      <p @click="sub">提交</p>
      </div>
      </div>
    <!--完成-->
    <div class="comments" @click="com" v-show="isCom">
      完成
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        isOpen: true,
        isShow: false,
        isOpenone: true,
        isCom: false,
      }
    },
    methods:{
      back(){
        this.$router.go(-1);
      },
      comment(){
         this.isOpen =! this.isOpen;
        this.isShow =! this.isShow;
      },
      service(){
        this.isShow =! this.isShow;
        this.isOpen =! this.isOpen;
      },
      sub(){
        this.isOpenone =! this.isOpenone;
        this.isCom =! this.isCom;
      },
      com(){
        this.isCom =! this.isCom;
        this.isOpenone =! this.isOpenone;
        this.$router.push('jiakefu/kefu');
      }
    }
  }
</script>
<style scoped>
  #wrapper{
    width: 100%;
    height:24rem;
    background-color: #f2f2f2;
  }
  .top{
    position: relative;
    width: 100%;
    height: 2.5rem;
    background-color: #e53e42;
  }
  .wenzi{
    font-family: MicrosoftYaHei;
    font-size: 0.7rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 2.25rem;
    letter-spacing: 0.04rem;
    color: white;
    position: absolute;
    top: 0.65rem;
    left: 6rem;
  }
  img{
    width: 0.4rem;
  }
  .left {
    position: absolute;
    top: 1.5rem;
    left: 0.7rem;
  }
  /*编辑*/
  .bian{
    float: right;
    margin-top: 1.4rem;
    color: white;
    font-weight: 100;
    font-size:0.5rem;
  }
  .comment{
    float: right;
    color: white;
    margin-top: 0.7rem;
    font-size:0.5rem;
    text-align: center;
    margin-right: 0.5rem;

  }
  .comment img{
    width: 0.9rem;
  }
  /*content*/
  .content .img{

    width: 1.5rem;
    height: 1.5rem;
    background: #e53e42;
    border-radius: 50%;
    margin: 2rem 1rem;
  }
  .content img{
    width: 1.2rem;
    margin-left: 0.2rem;
    margin-top: 0.2rem;
    text-align: center;
  }
  /*弹窗部分*/
  .window {
    width: 100%;
    height:9.5rem;
    background: #ffffff;

  }
  .window span{
    margin-left: 3rem;
    padding-left: 1rem;
    color: #4d4d4d;
    font-size:0.6rem;
    font-weight:200;
  }
  .window ul{
    display: inline-block;
    margin-top: 8.3rem;
    margin-left: 3.5rem;
    font-size:0.5rem;
    color: #808080;
    text-align: center;
  }

  .left ul .li img{
    width: 0.8rem;
  }
  input{
    font-size:0.5rem;
    color: #808080;
    margin-top: 2.6rem;
    margin-left: 3rem;
    font-weight:100;
    width:10rem;
    height: 3rem;
    border: none;
    outline:none;

  }
  .submit p:nth-child(2){
    font-size:0.6rem;
    color: white;
    margin-top: 0.9rem;
    width:10rem;
    height: 1rem;
    background: #61a7ea;
    padding-top: 0.2rem;
    font-weight:100;
    margin-left: 2.9rem;
    text-align: center;
  }
  .comments{
    width: 6rem;
    height: 1rem;
    color: white;
    background: #61a7ea;
    text-align: center;
    font-size:0.7rem;
    margin-left: 4.5rem;
    font-weight:100;
  }
</style>

